<template>
    <div id="div2048">
        <a id="start">tap to start :-)</a>

    </div>
</template>

<script>
    import gameJs from "@/utils/2048.js";
    let _game;
    let startBtn;
    export default {
        data () {
            return {
                tiles: [],
                type:  Object,
                game: "",
                startBtn:"",
                startTime:"",
                endTime:"",
                endTime1:"",
            }
        },
        methods:{

            onloads(){
                var container = document.getElementById('div2048');
                startBtn = document.getElementById('start');
                startBtn.onclick = function(){
                    this.style.display = 'none';
                    _game = _game || new gameJs.game2048(container);
                    _game.init();
                    var myDate = new Date();
                    this.startTime = myDate.toLocaleTimeString();
                }

            },
            inits(){
                document.onkeydown = function(e){
                    console.log("_game2",_game);
                    var keynum;
                    var keychar;
                    if(window.event){       // IE
                        keynum = e.keyCode;
                    }
                    else if(e.which){       // Netscape/Firefox/Opera
                        keynum = e.which;
                    }
                    keychar = String.fromCharCode(keynum);
                    if(['W', 'S', 'A', 'D'].indexOf(keychar) > -1){
                        if(_game.over()){
                            var myDate = new Date();
                            this.endTime = myDate.toLocaleTimeString();
                            _game.clean();
                            startBtn.style.display = 'block';
                            startBtn.innerHTML = 'game over, replay?';
                            return;
                        }
                        _game.move(keychar);
                    }
                    if(_game.max()){
                        var myDate = new Date();
                        this.endTime1 = myDate.toLocaleTimeString();
                        _game.clean();
                        startBtn.style.display = 'block';
                        startBtn.innerHTML = '恭喜通关';
                        return;
                    }
                }
            },
        },
        mounted() {
            this.onloads();
            this.inits();

        }

    }
</script>

<style>
    #div2048
    {
        width: 500px;
        height: 500px;
        background-color: #b8af9e;
        margin: 0 auto;
        position: relative;
    }
    #start
    {
        width: 500px;
        height: 500px;
        line-height: 500px;
        display: block;
        text-align: center;
        font-size: 30px;
        background: #f2b179;
        color: #FFFFFF;
    }
    #div2048 div.tile
    {
        margin: 20px 0px 0px 20px;
        width: 100px;
        height: 40px;
        padding: 30px 0;
        font-size: 40px;
        line-height: 40px;
        text-align: center;
        float: left;
    }
    #div2048 div.tile0{
        background: #ccc0b2;
    }
    #div2048 div.tile2
    {
        color: #7c736a;
        background: #eee4da;
    }
    #div2048 div.tile4
    {
        color: #7c736a;
        background: #ece0c8;
    }
    #div2048 div.tile8
    {
        color: #fff7eb;
        background: #f2b179;
    }
    #div2048 div.tile16
    {
        color:#fff7eb;
        background:#f59563;
    }
    #div2048 div.tile32
    {
        color:#fff7eb;
        background:#f57c5f;
    }
    #div2048 div.tile64
    {
        color:#fff7eb;
        background:#f65d3b;
    }
    #div2048 div.tile128
    {
        color:#fff7eb;
        background:#edce71;
    }
    #div2048 div.tile256
    {
        color:#fff7eb;
        background:#edcc61;
    }
    #div2048 div.tile512
    {
        color:#fff7eb;
        background:#ecc850;
    }
    #div2048 div.tile1024
    {
        color:#fff7eb;
        background:#edc53f;
    }
    #div2048 div.tile2048
    {
        color:#fff7eb;
        background:#eec22e;
    }
</style>
